// src/views/map/Baidu.tsx
import { message } from 'antd';
import React, { useEffect } from 'react';

type BaiduProps = {}

export const Baidu = (props: BaiduProps) => {
    useEffect(() => {
        var map = new window.BMapGL.Map("container");
        map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 12);
        var output = "从西单到上地驾车需要";
        var searchComplete = function (results: any) {
            if (transit.getStatus() !== window.BMAP_STATUS_SUCCESS) {
                return;
            }
            var plan = results.getPlan(0);
            output += plan.getDuration(true) + "\n";    //获取时间
            output += "总路程为：";
            output += plan.getDistance(true) + "\n";    //获取距离
        }
        var transit = new window.BMapGL.DrivingRoute(map, {
            renderOptions: { map: map },
            onSearchComplete: searchComplete,
            onPolylinesSet: function () {
                setTimeout(function () { message.success(output) }, 1000);
            }
        });
        var start = new window.BMapGL.Point(116.404844, 39.911836);
        var end = new window.BMapGL.Point(116.308102, 40.056057)
        transit.search(start, end);
    }, [])
    
    return (
        <>
            <div id="container" style={{
                width: "100%",
                height: "100%"
            }}></div>
        </>
    );
}